$(function() {
  var currentPage = 1;
  var pageSize = 3;
  var imgArr = [];
  // 模态框点击
  $(".addCategory").click(function() {
    $("#addModal").modal("show");
  });

  // 渲染表格数据
  function render() {
    $.ajax({
      url: "/product/queryProductDetailList",
      data: {
        page: currentPage,
        pageSize
      },
      dataType: "json",
      success: function(res) {
        $("tbody").html(template("tmp", res));
        page(res.total);
      }
    });
  }
  render();

  // 分页
  function page(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      size: "small", //设置控件的大小，mini, small, normal,large
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        render();
      }
    });
    // 注意：总页数需要根据数据库的总数来算，所一般需要函数，根据总数，生成分页
  }

  // 渲染二级列表数据
  $(".addCategory").click(function() {
    $.ajax({
      url: "/category/querySecondCategoryPaging",
      data: {
        page: 1,
        pageSize: 10000
      },
      dataType: "json",
      success: function(res) {
        console.log(res);
        $(".render-second-level-menu").html(template("tmp2", res));
      }
    });
  });

  // 将下拉框与按钮绑定好，并且将id存储到隐藏域中
  $(".render-second-level-menu").on("click", "li", function() {
    $(".second-menu-title").text($(this).text());
    $('input[name="brandId"]').val($(this).data("id"));
    $("#form-validator")
      .data("bootstrapValidator")
      .updateStatus("brandId", "VALID");
  });

  // 上传图片
  $("#fileupload").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      console.log(data.result);
      imgArr.unshift(data.result);
      $("#imgBox").prepend(
        '<img src="' + data.result.picAddr + '" height="60">'
      );
      if (imgArr.length == 3) {
        $("#picArr").val(JSON.stringify(imgArr));
        $("#form-validator")
          .data("bootstrapValidator")
          .updateStatus("picArr", "VALID");
      }
      if (imgArr.length > 3) {
        imgArr.pop();
        $("#imgBox img:last-child").remove();
        $("#picArr").val(JSON.stringify(imgArr));
      }
      console.log(imgArr);
    }
  });

  // 表单校验
  $("#form-validator").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      brandId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择二级分类"
          }
        }
      },
      proName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品名称"
          }
        }
      },
      proDesc: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品描述"
          }
        }
      },
      num: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品库存"
          },
          regexp: {
            regexp: /^[1-9]\d*$/,
            message: "库存为非0的数字"
          }
        }
      },
      size: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品尺码"
          },
          regexp: {
            regexp: /^\d{2}-\d{2}$/,
            message: "尺码格式为xx-xx x表示数字"
          }
        }
      },
      oldPrice: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品原价"
          },
          regexp: {
            regexp: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
            message: "价格为非0的数字"
          }
        }
      },
      price: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请输入商品现价"
          },
          regexp: {
            regexp: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
            message: "价格为非0的数字"
          }
        }
      },
      picArr: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请上传三张图片"
          }
        }
      }
    }
  });

  // 在表单数据合理的情况下发送数据
  $("#form-validator").on("success.form.bv", function(e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      type: "POST",
      url: "/product/addProduct",
      data: $("#form-validator").serialize(),
      dataType: "json",
      success: function(res) {
        console.log(res);
        $("#addModal").modal("hide");
        render();
        $("#form-validator")
          .data("bootstrapValidator")
          .resetForm(true);
        $(".second-menu-title").text("请选择二级分类");
        $("#imgBox").empty();
        // 数组清空至关重要
        imgArr = [];
      }
    });
  });
});
